<template>
  <div class="bar-echart">
    <div class="title">
      <span class="title-content">{{ title }}</span>
      <span v-show="isMore" class="more_icon" @click="clickMore"><img
        src="../../assets/images/turnRight.svg"
        alt=""></span>
    </div>
    <div class="bar">
      <div :class="obj" :style="minHeight"/>
      <div v-if="isShowUnit" class="until">
        <span>单位：{{ units }}</span>
      </div>
    </div>
    <none-data v-if="isShowNoneData"/>
  </div>
</template>
<script>
import noneData from '@/components/noneData/noneData'
export default {
  components: {
    noneData
  },
  props: {
    obj: {
      type: String,
      default: ''
    },
    isSum: {
      type: Boolean,
      default: false
    },
    isMore: {
      type: Boolean,
      default: false
    },
    yName: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      units: '',
      isShowNoneData: false,
      isShowUnit: true,
      minHeight: {
        'height': '2.5rem'
      },
      charts: null,
      clickIndex: 0,
      clickName: [],
      clickSum: 0,
      title: '',
      isLegend: false,
      barTop: '10%'
    }
  },

  methods: {
    disposed () {
      if (this.charts) {
        this.charts.dispose()
      }
    },
    bar (yAxisData, series, minInterval) {
      let that = this
      that.clickIndex = 0
      that.clickName = []
      that.clickSum = 0
      let dom = document.querySelector('.' + this.obj)
      let myBarEchart = this.charts = this.$echarts.init(dom)
      let option = {
        tooltip: {
          show: false,
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          show: true,
          itemWidth: 16,
          itemHeight: 4,
          itemGap: 2,
          selectedMode: false,
          x: 'right',
          textStyle: {
            color: '#4fd4f7', // 图例文字颜色
            fontSize: 12
          }
        },
        color: ['#65C4EA', '#FF9800', '#A6A6A6', '#8BC34A'],
        grid: {
          left: '1%',
          right: '4%',
          top: that.barTop,
          bottom: '2%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.2],
          minInterval: minInterval,
          axisLabel: {
            show: true,
            textStyle: {
              color: '#138cef'
            },

            interval: 0,
            rotate: -20

          },
          axisLine: {
            lineStyle: {
              color: '#138cef'
            }
          },
          grid: {
            y2: 150
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          type: 'category',
          show: true,
          axisLabel: {
            formatter: function (params) {
              if (that.isSum) {
                if (params.indexOf('阿拉善') !== -1 || params.indexOf('黑龙江') !== -1 || params.indexOf('内蒙古') !== -1) {
                  return params.substring(0, 4)
                } else {
                  return params.substring(0, 2)
                }
              } else {
                if (params.length > 5) {
                  return params.substring(0, 5) + '\n' + params.substring(5)
                } else {
                  return params
                }
              }
            },
            textStyle: {
              align: 'right',
              baseline: 'middle'

            }

          },
          data: yAxisData,
          axisLine: {
            lineStyle: {
              color: '#138cef'
            }
          },
          name: that.yName
        },
        series: series
      }
      myBarEchart.on('click', function (params) {
        if (!that.isSum) {
          return
        }
        if (that.clickName.indexOf(params.name) === -1) {
          that.clickName[that.clickIndex] = params.name
          that.clickIndex++
          that.clickSum += Number(params.data)
        } else {
          let index = that.clickName.indexOf(params.name)
          that.clickName.splice(index, index + 1)
          that.clickIndex--
          that.clickSum = that.clickSum - params.data
        }
        that.changeSum(that.clickSum)
        let newColor = new that.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{
          offset: 0,
          color: '#3084CC'
        }, {
          offset: 1,
          color: '#31F4D2'
        }])
        let oldColor = new that.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{
          offset: 0,
          color: '#333E58'
        }, {
          offset: 1,
          color: '#333E58'
        }])
        that.charts.setOption({
          series: [ {
            itemStyle: {
              normal: {
                color: function (data) {
                  let flag = false
                  for (let i = 0; i < that.clickName.length; i++) {
                    if (data.name === that.clickName[i]) {
                      flag = true
                    }
                  }
                  return flag ? newColor : oldColor
                }
              }
            }
          }]
        })
      })
      myBarEchart.setOption(option)
    },

    barData (yAxisData, barData, title, units, flag, minInterval) {
      let that = this
      this.title = title
      yAxisData = minInterval === 1 ? [] : yAxisData
      this.isShowNoneData = yAxisData.length === 0
      this.isShowUnit = !this.isShowNoneData
      this.disposed()

      if (barData && barData.length > 6) {
        that.barTop = '2%'
        if (barData.length === 12) {
          that.barTop = '6%'
        }
        this.minHeight['height'] = (barData.length * 0.8) + 'rem'
      } else {
        that.barTop = '10%'
        this.minHeight['height'] = '6rem'
      }
      let series = []
      if (!flag) {
        let resXdata = []
        for (let i in barData) {
          if (barData[i] !== 0) {
            resXdata.push(barData[i])
          }
        }
        if (resXdata.length === 0) {
          minInterval = 1
        } else {
          minInterval = 0
        }
        that.isLegend = false
        series.push({
          name: '',
          type: 'bar',
          barMaxWidth: '15',
          data: barData,
          itemStyle: {
            normal: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                offset: 0,
                color: '#3084CC'
              }, {
                offset: 1,
                color: '#31F4D2'
              }])
            }
          },
          label: {
            normal: {
              show: true,
              position: 'right',
              color: '#4fd4f7'
            }
          }
        })
      } else {
        if (minInterval === 1) {
          that.isLegend = false
          series = []
        } else {
          series = barData
          that.isLegend = true
        }
      }
      this.$nextTick(() => {
        this.bar(yAxisData, series, minInterval)
      })
      this.units = units
    },
    changeSum (sum) {
      this.$emit('changeSum', sum)
    },
    clickMore () {
      this.$emit('showMore')
    }

  }
}

</script>
<style lang="scss" scoped>
.bar-echart {
  margin-top: .20rem;
  position: relative;
  margin-bottom: .20rem;
  .bar{
    border: 1px solid rgba(121, 196, 238, .35);
    background:rgba(47,60,134,.35);
  }
  .title{
    font-size: .32rem;
    line-height: 160%;
    margin-bottom: .10rem;
    color:#65c4ea;
    padding-right: .05rem;
    position: relative;
    .title-content {
      font-size: .32rem;
      width: 90%;
      display: inline-block;
      margin-right: .10rem;
      padding-left: .1rem;
    }
    .more_icon {
      font-size: .32rem;
      display: inline-block;
      position: absolute;
      right: .1rem;
      top: 20%;
      font-size: .60rem;
      img {
        display: inline-block;
        width: .25rem;
        height: .25rem;
        line-height: .4rem;
        margin-top:-.2rem;
      }
    }
  }
  .until {
    text-align: right;
    margin-right: 2%;
    margin-bottom: .20rem;
    span {
      color: #4fd4f7;
    }
  }
}
</style>
